<template>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="900px">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="margin-left:50px;">
        <el-form-item :label="$t('table.category')">
            <el-cascader
              :placeholder="$t('placeholder.select')"
              v-model="temp.category_id"
              :options="categoryOptions"
              change-on-select
            ></el-cascader>
            <!-- <el-select v-model="temp.category_id" class="filter-item" :placeholder="$t('placeholder.select')">
              <el-option v-for="(item, index) in categoryOptions" :key="index" :label="item.name" :value="item.id" />
            </el-select> -->
          </el-form-item>
        <el-form-item :label="$t('table.available')">
          <el-radio v-model="temp.is_available" label="1" name="is_avaliable">{{ $t('table_element.available.on') }}</el-radio>
          <el-radio v-model="temp.is_available" label="0" name="is_avaliable">{{ $t('table_element.available.un') }}</el-radio>
        </el-form-item>
        <template>
          <el-tabs v-model="activeName" >
            <el-tab-pane label="en" name="first">
              <el-form-item :label="$t('table.name')" required prop="name">
                <el-input v-model="temp.name" name="name" />
              </el-form-item>
              <el-form-item :label="$t('table.content')">
                <tinymce :height="300" id="fContent" v-model="temp.content"/>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="zh-cn" name="second">
              <el-form-item :label="$t('table.name')">
                <el-input v-model="temp.cnname" name="cnname" />
              </el-form-item>
              <el-form-item :label="$t('table.content')">
                <tinymce :height="300" id="fCNContent" v-model="temp.cncontent"/>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="zh-hk" name="third">
              <el-form-item :label="$t('table.name')">
                <el-input v-model="temp.hkname" name="hkname" />
              </el-form-item>
              <el-form-item :label="$t('table.content')">
                <tinymce :height="300" id="fHKContent" v-model="temp.hkcontent"/>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="zh-tw" name="fourth">
              <el-form-item :label="$t('table.name')">
                <el-input v-model="temp.twname" name="twname" />
              </el-form-item>
              <el-form-item :label="$t('table.content')">
                <tinymce :height="300" id="fTWContent" v-model="temp.twcontent"/>
              </el-form-item>
            </el-tab-pane>
          </el-tabs>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>
</template>